import React, { useState, useRef, forwardRef, useImperativeHandle } from 'react'
import { useModel } from '@umijs/max'
import { ProTable } from '@ant-design/pro-components'
import { Alert, Drawer, Space, Image, Table } from 'antd'
import './PlatformDataDetails.less'

const PlatformDataDetails = ({}, ref) => {
  const { GetOrderList } = useModel('PlatformData')
  const [pageSize, setPageSize] = useState(10) //  每页数量
  const [currentPage, setCurrentPage] = useState(1) //  当前页码
  const [openDrawer, setOpenDrawer] = useState(false)

  const [platformId, setPlatformId] = useState(0)

  const [amountTotal, setAmountTotal] = useState({}) // 交易金额总计

  const tableRef = useRef()

  const onOpenDrawer = id => {
    setPlatformId(id)
    setOpenDrawer(true)
  }

  const onCloseDrawer = () => {
    setOpenDrawer(false)
  }

  // 通过 ref 暴露给父组件的方法
  useImperativeHandle(ref, () => ({
    onOpenDrawer
  }))

  const originColumns = [
    {
      title: 'ID',
      dataIndex: 'id',
      width: 80,
      hideInSearch: true
    },
    {
      title: '订单编号',
      dataIndex: 'order_sn'
    },
    {
      title: '商品信息',
      dataIndex: 'goods_name',
      width: 280,
      render: (text, record) => (
        <Space>
          <Image width={72} src={record.goods_pic} />
          <div>
            <div>{text}</div>
            <span>规格：{record.attr_value}</span>
          </div>
        </Space>
      )
    },
    {
      title: '所属店铺',
      dataIndex: 'merchant_name',
      hideInSearch: true
    },
    {
      title: '下单人',
      dataIndex: 'cert_name'
    },
    {
      title: '下单手机号',
      dataIndex: 'tel',
      hideInSearch: true
    },
    {
      title: '订单状态',
      dataIndex: 'status_desc',
      hideInSearch: true
    },
    {
      title: '订单创建时间',
      dataIndex: 'create_at',
      valueType: 'dateTimeRange',
      search: {
        transform: value => {
          return {
            created_at_start: value[0],
            created_at_end: value[1]
          }
        }
      }
    },
    {
      title: '订单总价(元)',
      dataIndex: 'order_amount',
      hideInSearch: true
    },
    {
      title: '结算方式',
      hideInSearch: true,
      render: (text, record) => {
        return <>订单成交结算</>
      }
    },
    {
      title: '结算比例',
      dataIndex: 'order_rate',
      hideInSearch: true
    },
    {
      title: '结算金额(元)',
      dataIndex: 'settle_amount',
      hideInSearch: true
    },
    {
      title: '流水号',
      dataIndex: 'out_trade_no'
    },
    {
      title: '结算时间',
      dataIndex: 'settlement_time',
      valueType: 'dateTimeRange',
      search: {
        transform: value => {
          return {
            settlement_time_start: value[0],
            settlement_time_end: value[1]
          }
        }
      }
    }
  ]

  return (
    <Drawer destroyOnClose width={'80%'} title='订单成交明细' onClose={onCloseDrawer} open={openDrawer}>
      <Alert message='仅展示合伙人关联平台的成交结算订单' showIcon />

      <ProTable
        actionRef={tableRef}
        request={async params => {
          let param = {
            per_page: params.pageSize,
            page: params.current,
            platform_id: platformId,
            order_sn: params.order_sn,
            created_at_start: params.created_at_start,
            created_at_end: params.created_at_end,
            settlement_time_start: params.settlement_time_start,
            settlement_time_end: params.settlement_time_end,
            out_trade_no: params.out_trade_no,
            goods_name: params.goods_name
          }

          const res = await GetOrderList(param)

          const { data, total, bottom_total_order_amount, bottom_total_settle_amount } = res

          setAmountTotal({
            bottom_total_order_amount,
            bottom_total_settle_amount
          })

          setCurrentPage(params.current)
          setPageSize(params.pageSize)

          return {
            data: data,
            success: true,
            total: total
          }
        }}
        rowKey='id'
        pagination={{
          pageSize: pageSize,
          current: currentPage,
          showSizeChanger: true
        }}
        search={{
          defaultCollapsed: false,
          labelWidth: 'auto',
          span: 8
        }}
        columns={originColumns}
        scroll={{ x: 'max-content' }}
        summary={pageData => {
          return (
            <Table.Summary.Row>
              {originColumns.map((item, index) => {
                return (
                  <Table.Summary.Cell index={index} key={index}>
                    <div className='summary_cell'>
                      {index === 0 && <div className='summary_cell_item'>条件统计</div>}
                      {index === 8 && <div className='summary_cell_item'>{amountTotal.bottom_total_order_amount}</div>}
                      {index === 11 && (
                        <div className='summary_cell_item'>{amountTotal.bottom_total_settle_amount}</div>
                      )}
                    </div>
                  </Table.Summary.Cell>
                )
              })}
            </Table.Summary.Row>
          )
        }}
      />
    </Drawer>
  )
}

export default forwardRef(PlatformDataDetails)
